<template>
    <view>
        <!-- search -->

        <view class="search">
            <navigator url="../city/index?id=1" hover-class="none">
                <image src="/static/imgs/icon/coord.png" mode="aspectFit"></image>
                <text>{{ city }}</text>
            </navigator>
            <view @tap="toSearch" class="search_box">
                <icon style="margin-top: 0;" type="search" size="14" />
                <text>请输入查询信息</text>
            </view>
        </view>
        <!-- 排序 -->
        <view class="list_sort">
            <view :class="'sort_list ' + (isCars ? '' : 'select')" @tap="selectCars">
                <text>区域</text>
                <image :src="isCars ? '../../imgs/icon/buttom.png' : '../../imgs/icon/top-red.png'"></image>
            </view>
            <view :class="'sort_list ' + (isPrice ? '' : 'select')" @tap="selectPrice">
                <text>薪资范围</text>
                <image :src="isPrice ? '../../imgs/icon/buttom.png' : '../../imgs/icon/top-red.png'"></image>
            </view>
            <view :class="'sort_list ' + (isType ? '' : 'select')" @tap="selectType">
                <text>工作类别</text>
                <image :src="isType ? '../../imgs/icon/buttom.png' : '../../imgs/icon/top-red.png'"></image>
            </view>
        </view>
        <!-- 选择区域 -->
        <view class="select_cars" v-if="!isCars">
            <scroll-view class="bigWrap" :scroll-y="true" :scroll-top="scrollTop" style="height: 600rpx; left: 0; top: 0; bottom: 0; right: 0">
                <view :class="'select_cars_list ' + (carid == 0 ? 'colorred' : '')" @tap="selectcarsitem" id="0" data-title="全部">
                    <text>全部</text>
                    <block v-if="carid == 0">
                        <image src="/static/imgs/icon/dui.png"></image>
                    </block>
                </view>
                <block v-for="(item, index) in arealist" :key="index">
                    <block v-if="item.id == carid">
                        <view class="select_cars_list colorred" @tap="selectcarsitem" :id="item.id" :data-title="item.name">
                            <text>{{ item.name }}</text>
                            <image src="/static/imgs/icon/dui.png"></image>
                        </view>
                    </block>

                    <block v-else>
                        <view class="select_cars_list" @tap="selectcarsitem" :id="item.id" :data-title="item.name">
                            <text>{{ item.name }}</text>
                        </view>
                    </block>
                </block>
            </scroll-view>
        </view>
        <view class="small_overlay" v-if="!isCars" @tap="selectCars"></view>

        <!-- 选择价格 -->

        <view class="select_sort" v-if="!isPrice">
            <scroll-view class="bigWrap" :scroll-y="true" :scroll-top="scrollTop" style="height: 600rpx; left: 0; top: 0; bottom: 0; right: 0">
                <view :class="'select_cars_list ' + (priceid == 0 ? 'colorred' : '')" @tap="selectpriceitem" id="0" data-title="不限">
                    <text>不限</text>
                    <block v-if="priceid == 0">
                        <image src="/static/imgs/icon/dui.png"></image>
                    </block>
                </view>
                <block v-for="(item, index) in housepricelist" :key="index">
                    <block v-if="item.id == priceid">
                        <view class="select_cars_list colorred" @tap="selectpriceitem" :id="item.id" :data-title="item.name">
                            <text>{{ item.name }}</text>
                            <image src="/static/imgs/icon/dui.png"></image>
                        </view>
                    </block>

                    <block v-else>
                        <view class="select_cars_list" @tap="selectpriceitem" :id="item.id" :data-title="item.name">
                            <text>{{ item.name }}</text>
                        </view>
                    </block>
                </block>
            </scroll-view>
        </view>
        <view class="small_overlay" v-if="!isPrice" @tap="selectPrice"></view>

        <!-- 选择 -->

        <view class="select_sort" v-if="!isType">
            <scroll-view class="bigWrap" :scroll-y="true" :scroll-top="scrollTop" style="height: 600rpx; left: 0; top: 0; bottom: 0; right: 0">
                <view :class="'select_cars_list ' + (typeid == 0 ? 'colorred' : '')" @tap="selecttypeitem" id="0" data-title="不限">
                    <text>不限</text>
                    <block v-if="typeid == 0">
                        <image src="/static/imgs/icon/dui.png"></image>
                    </block>
                </view>
                <block v-for="(item, index) in jobcatelist" :key="index">
                    <block v-if="item.id == typeid">
                        <view class="select_cars_list colorred" @tap="selecttypeitem" :id="item.id" :data-title="item.name">
                            <text>{{ item.name }}</text>
                            <image src="/static/imgs/icon/dui.png"></image>
                        </view>
                    </block>

                    <block v-else>
                        <view class="select_cars_list" @tap="selecttypeitem" :id="item.id" :data-title="item.name">
                            <text>{{ item.name }}</text>
                        </view>
                    </block>
                </block>
            </scroll-view>
        </view>
        <view class="small_overlay" v-if="!isType" @tap="selectType"></view>

        <view style="height: 88px"></view>

        <!-- 列表 -->
        <view class="news">
            <!-- parse <template is="tasklist" v-if="tasklist" :data="tasklist"/> -->
            <block name="tasklist" v-if="tasklist">
                <view class="joblist_2" v-for="(item, index) in tasklist" :key="index">
                    <view class="title_2" @tap="toTaskDetail" :data-id="item.id">
                        <view class="jobinfo_2">
                            <view class="jobinfoleft_2">
                                <view class="address_2">
                                    <view class="jobname_2">{{ item.title }}</view>

                                    <view class="moneyinfo_2"></view>
                                    <view class="vprice2"></view>
                                </view>

                                <view class="joblable_2">招{{ item.num }}人 | {{ item.jobtitle }}</view>
                            </view>

                            <view class="jobinforight_2">
                                <view class="fxmoney_2">
                                    <view style="width: 200rpx; color: #fff">推荐入职奖</view>
                                    <view>{{ item.money }}元</view>
                                </view>
                            </view>
                        </view>

                        <view class="detail_2">
                            <view class="info_2">
                                <view class="companyinfo_2" style="font-size: 0.9rem">
                                    {{ item.companyname }}
                                </view>
                                <view class="jobmoney_2">
                                    <view class="time_2">{{ item.createtime }}</view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </block>
        </view>

        <!-- 加载更多 -->
        <view class="loadmore">
            <text>{{ loadMore }}</text>
        </view>

        <view class="u-tap-btn">
            <button class="u-go-home2" open-type="contact">
                <view class="iconfont fa fa-comments-o"></view>
            </button>
        </view>
    </view>
</template>

<script>
import { Findjob } from './findjob-model.js';
var findjob = new Findjob();
import { Task } from '../../model/task-model.js';
var task = new Task();
export default {
    data() {
        return {
            city: uni.getStorageSync('companyinfo').city,
            isCars: true,

            // 选择车源开关
            isSort: true,

            // 选择排序开关
            isPrice: true,

            // 选择价格开关
            isType: true,

            loadMore: '',
            list: [],
            house_list: [],
            housetypelist: [],
            houseareaid: 0,
            housepriceid: 0,
            housetype: 0,
            page: 1,
            tasklist: '',
            arealist: '',
            jobcatelist: '',
            carid: '',
            title: '',
            priceid: '',
            price: '',
            typeid: '',
            typetitle: '',
            scrollTop: 0,
            housepricelist: []
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onShow: function (options) {
        var that = this;
        uni.setNavigationBarTitle({
            title: '任务中心'
        });
        uni.showShareMenu({
            withShareTicket: true,
            menus: ['shareAppMessage', 'shareTimeline']
        });
        var cityinfo = uni.getStorageSync('cityinfo');
        console.log(cityinfo);
        if (cityinfo) {
            uni.setStorageSync('city', cityinfo.name);
            that.setData({
                city: uni.getStorageSync('cityinfo').name
            });
        } else {
        }
        var cityid = uni.getStorageSync('cityinfo').id;
        var params = {
            cityid: cityid,
            page: that.page
        };
        task.GetTaskList((data) => {
            console.log(data);
            that.setData({
                tasklist: data.tasklist,
                arealist: data.arealist,
                jobcatelist: data.jobcatelist
            });
        }, params);
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        toTaskDetail: function (e) {
            var id = e.currentTarget.dataset.id;
            uni.navigateTo({
                url: '/pages/taskdetail/index?id=' + id
            });
        },

        selectcarsitem: function (e) {
            var carid = e.currentTarget.id;
            var title = e.currentTarget.dataset.title;
            this.setData({
                carid: carid,
                isCars: true,
                title: title
            });
            this.houseareaid = carid;
            this.gethouselist();
        },

        selectpriceitem: function (e) {
            var priceid = e.currentTarget.id;
            var title = e.currentTarget.dataset.title;
            this.setData({
                priceid: priceid,
                isPrice: true,
                price: title
            });
            this.housepriceid = priceid;
            this.gethouselist();
        },

        selecttypeitem: function (e) {
            var typeid = e.currentTarget.id;
            var title = e.currentTarget.dataset.title;
            this.setData({
                typeid: typeid,
                isType: true,
                typetitle: title
            });
            this.housetype = typeid;
            this.gethouselist();
        },

        selectCars: function (e) {
            var that = this;
            that.setData({
                isSort: true,
                isPrice: true,
                isType: true,
                isCars: !that.isCars
            });
        },

        selectPrice: function () {
            var that = this;
            that.setData({
                isSort: true,
                isCars: true,
                isType: true,
                isPrice: !that.isPrice
            });
        },

        selectType: function () {
            var that = this;
            that.setData({
                isSort: true,
                isCars: true,
                isPrice: true,
                isType: !that.isType
            });
        },

        toSearch() {
            console.log('占位：函数 toSearch 未声明');
        }
    }
};
</script>
<style>
@import '../templates/css/index_2.css'; /* search */
/**app.wxss**/
page {
    background-size: 100% 100%;
    height: 100%;
    font-size: 32rpx;
    font-family: '微软雅黑', '方正黑体';
    color: #333;
}

.colorred {
    color: #e62129;
}

.city_header {
    display: flex;
    width: 92%;
    line-height: 50px;
    padding: 0 4%;
    border-bottom: 1px solid #f5f5f5;
    position: fixed;
    top: 0;
    z-index: 99;
    background-color: #fff;
}

.city_header image {
    width: 18px;
    height: 18px;
    padding-top: 17px;
}

.city_header text {
    flex: 1;
    color: #333;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}

/* 列表 */
.carlist {
    display: flex;
    flex-direction: column;
    width: 92%;
    padding: 5px 4%;
    border-bottom: 1px solid #ececec;
}

.carlist:last-child {
    border-bottom: 0;
}

.carlist_top {
    display: flex;
}

.car_imgs {
    position: relative;
    width: 104px;
    height: 78px;
}

.newtop {
    position: absolute;
    top: 0;
    left: 0;
    padding: 1px 3px;
    text-align: center;
    background-color: #ff3a3b;
    font-size: 10px;
    color: #fff;
}

.picnum {
    position: absolute;
    bottom: 5px;
    right: 5px;
    padding: 0 5px;
    font-size: 10px;
    color: #fff;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 4px;
}

.car_imgs image {
    width: 100%;
    height: 100%;
}

.car_info {
    flex: 1;
    width: 60%;
    padding-left: 5px;
}

.car_name {
    display: block;
    position: relative;
    line-height: 20px;
    height: auto;
    overflow: hidden;
    color: #333;
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.car_hid {
    display: block;
    line-height: 20px;
    padding-top: 15px;
    color: #666;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.car_present {
    display: flex;
}

.current_price {
    line-height: 20px;
    font-size: 15px;
    color: #db0000;
}

.original_price {
    color: #929292;
    font-size: 12px;
    text-decoration: line-through;
    padding-left: 5px;
}

.car_present {
    padding-top: 5px;
}

.car_tag {
    flex: 1;
    text-align: right;
}

.car_tag text {
    padding: 0 3px;
    color: #ff7e00;
    border: 1px solid #ff7e00;
    border-radius: 2px;
    font-size: 12px;
    line-height: 14px;
}

.carlist_buttom {
    display: flex;
    flex: 1;
    padding-top: 5px;
}

.carlist_buttom text {
    font-size: 12px;
}

.owner_sm {
    line-height: 14px;
    padding: 0 3px;
    margin-right: 5px;
    border: 1px solid #e62129;
    border-radius: 2px;
    color: #e62129;
}

.owner_rz {
    line-height: 14px;
    padding: 0 3px;
    margin-right: 5px;
    background-color: #e62129;
    border-radius: 2px;
    color: #fff;
}

.owner_time {
    flex: 1;
    text-align: right;
}

/* 侧栏字母 */
.aside_letter {
    position: fixed;
    top: 58px;
    right: 0;
    z-index: 66;
}

.aside_letter text {
    display: block;
    width: 30px;
    font-size: 12px;
    line-height: 20px;
    color: #e62129;
    text-align: center;
}

/* 排序选中 */
.select_cars_list {
    display: flex;
    border-bottom: 1px solid #ececec;
}

.select_cars_list image {
    width: 18px;
    height: 18px;
    padding-top: 8px;
}

/* 售出 */
.sold {
    background: url('http://s2.nongjigou.com/images/sold.png') no-repeat right 0;
    background-size: 70px 70px;
}
.search {
    display: flex;
    width: 100%;
    height: 50px;
    padding: 0 4%;
    border-bottom: 1px solid #ececec;
    position: fixed;
    top: 0;
    z-index: 99;
    background-color: #fff;
}

navigator {
    line-height: 50px;
}

.search image {
    width: 30rpx;
    height: 34rpx;
    padding-right: 3px;
    vertical-align: sub;
}

.search text {
    line-height: 30px;
    font-size: 14px;
    color: #e62129;
}

.search_box {
    display: flex;
    flex: 1;
    height: 30px;
    padding-left: 15px;
    margin: 10px 0 0 10px;
    background-color: #f7f7f7;
}

.search_box icon {
    padding-top: 8px;
}

.search_box text {
    flex: 1;
    padding-left: 5px;
    color: #999;
}

/* 排序 */
.list_sort {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    line-height: 32px;

    position: fixed;
    top: 51px;
    z-index: 99;
    font-size: 14px;
    border-bottom: 1px solid #f5f5f5;
    color: #333;
    background-color: #fff;
}

.sort_list {
    width: 33%;
    text-align: center;
    border-right: 1px solid #ececec;
}

.sort_list:last-child {
    border-right: 0;
}

.sort_list image {
    width: 13px;
    height: 13px;
    vertical-align: middle;
}

.sort_list text {
    display: inline-block;
    width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.select_cars,
.select_sort,
.select_price {
    position: fixed;
    top: 85px;
    z-index: 999;
    width: 100%;
    padding: 0 4%;
    background-color: #fff;
}

.select_cars text,
.select_sort text {
    display: block;
    flex: 1;
    line-height: 35px;
    font-size: 13px;
}

.select_cars text:last-child,
.select_sort text:last-child {
    border-bottom: 0;
}

.select {
    border-bottom: 1px solid #e62129;
}

.select text {
    color: #e62129;
}

.select_price {
    display: flex;
    flex-wrap: wrap;
    padding: 6px 4%;
}
.select_price .item {
    width: 100%;
}
.select_price .item .content {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}
.select_price .item .content text {
    padding: 5rpx 15rpx;
    line-height: 30px;
    margin: 6px 1.8%;
    border: 1px solid #acacac;
    border-radius: 2px;
    text-align: center;
    font-size: 13px;
}

.select_price .boractive {
    border: 1px solid #e62129;
    color: #e62129;
}

/* 遮罩层 */
.small_overlay {
    position: fixed;
    width: 100%;
    height: 80%;
    bottom: 0;
    left: 0;
    z-index: 666;
    background-color: rgba(0, 0, 0, 0.5);
}

.loadmore {
    line-height: 35px;
    font-size: 15px;
    text-align: center;
}
.makebutton {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: center;
}
.makebutton button {
    background: #e62129;
    color: #fff;
    width: 260rpx;
    height: 70rpx;
    line-height: 70rpx;
    font-size: 0.7rem;
    align-self: center;
}

@import 'undefined';
</style>
